<template>
    <div>
        <aside class="l_box">
            <sort/>
            <search/>
            <phone/>
            <recom/>
        </aside>
        <main>
            <div class="infosbox">

                <!-- 内容页 -->
                <div class="newsview">
                    <h3 class="news_title">{{article_info.title}}</h3>
                    <div class="bloginfo">
                        <ul>
                            <li class="author">作者：<a href="/">{{article_info.author}}</a></li>
                            <li class="lmname"><a
                                :href="article_info.sort_id">{{article_info.sort_}}</a></li>
                            <li class="timer">时间：{{article_info.createtime}}</li>
                            <li class="view">{{article_info.count_view}}人已阅读</li>
                        </ul>
                    </div>
                    <!--
                    <div class="tags"><a v-for="(t,index) in article_info.news_tags" :key="index" href="/"
                                         target="_blank">{{t.tags_val}}</a>

                </div>
                 -->
                    <!-- v-html,可以以html格式输出 -->
                    <div class="news_con" v-html="article_info.content"></div>
                </div>

                <!-- 赞 -->
                <div class="share">
                    <p class="diggit"><a> 很赞哦！ </a>(<b id="diggnum">{{article_info.count_good}}</b>)
                    </p>
                </div>

                <!-- 上一个，下一个
                <div class="nextinfo">
                    <p>上一篇：<a href="/news/life/2018-03-13/804.html">作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</a></p>
                    <p>下一篇：<a href="/news/life/">返回列表</a></p>
                </div>
                -->

                <template v-if="$store.state.userIslogin === true">
                    <div class="button">
                        <el-button type="text" @click="commits()">修改文章</el-button>
                        <el-button type="text" @click="deletes(article_info.id)">删除文章</el-button>
                    </div>
                </template>

                <!-- 评论 -->
                <div class="news_pl">
                    <h2>文章评论</h2>
                    <div class="gbko">
                        <div class="fb">
                            <ul>
                                <p class="fbtime"><span>2018-07-24 08:52:48</span> 卜野</p>
                                <p class="fbinfo"></p>
                                <div class="ecomment"><span class="ecommentauthor">网友 家蚂蚁 的原文：</span>
                                    <p class="ecommenttext">坚持哟!看你每天都有写，请继续加油，再接再厉哦</p>
                                </div>
                            </ul>
                        </div>

                        <form name="saypl" id="saypl"
                              onsubmit="return CheckPl(document.saypl)">
                            <div id="plpost">
                                <p class="saying"><span><a href="/e/pl/?classid=77&amp;id=106">共有
                                    2条评论</a></span>来说两句吧...
                                </p>
                                <p class="yname"><span>用户名:</span>
                                    <input name="username" type="text" class="inputText" id="username" value=""
                                           size="16">
                                </p>
                                <p class="yzm"><span>验证码:</span>
                                    <input name="key" type="text" class="inputText" size="16">
                                </p>
                                <input name="nomember" type="hidden" id="nomember" value="1" checked="checked">
                                <textarea name="saytext" rows="6" id="saytext"></textarea>
                                <input name="imageField" type="submit" @click="postHf()" value="提交">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
    import {getArticle_info,deleteArticle_Info} from "../service/getData";

    export default {
        name: "info",
        data() {
            return {
                article_id: this.$route.params.id,
                article_info: {
                    id: 1,
                    author: "hzh",
                    changetime: "22/12/2018",
                    content_id: "1",
                    count_good: "1",
                    count_view: "1",
                    createtime: "22/12/2018",
                    o_content: "小内容2",
                    o_img: "/image/7.jpg",
                    sort_id: "100",
                    sort_: "心情",
                    title: "第二篇内容",
                    article_id: "1",
                    content: "内容详情"
                }
            }
        },
        methods: {
            findById: function () {
                getArticle_info(this.article_id).then((res)=>{
                    this.article_info = res.data
                });
            },
            commits: function () {
                this.$router.push({

                    /**
                     * 这里用的name传值
                     */

                    name: 'new_article',
                    //path: '/new_article.html',
                    params: {
                        article_title: this.article_info.title,
                        article_content: this.article_info.content
                    }
                })
            },
            postHf: function () {
                /**
                 * 拼接 数据
                 * */
            },
            deletes: function (val) {
                let tf = confirm("是否真的要删除");
                if (tf === true) {
                    deleteArticle_Info(val).then((res) => {
                        alert(res.msg);
                        this.$router.push("/list.html");
                    })
                }
            },
            /**
             * @return {boolean}
             */
            CheckPl: function (obj) {
                if (obj.saytext.value === "") {
                    alert("您没什么话要说吗？");
                    obj.saytext.focus();
                    return false;
                }
                return true;
            }
        },
        mounted(){
            this.findById();
        }
    }
</script>

<style scoped>
    .button {
        padding-left: 30px;
    }
</style>
